<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>头部公共样式</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/foot.css"/>
	</head>
	<body>
		<!--主页的头部 礼拜五-->
		<header>
			<a href="#/first"><img src="img/ylogo.png" class="ylog"/></a>
			<input type="" placeholder="请输入关键字进行搜索" />
			<a href="#/searchnull"><span class="ysea"><img src="img/yseare.png"/></span></a>
			<a href="###"><span class="yuser"><i>个人中心</i></span></a>
			<a href="###"><span class="yshop"><i>购物车</i></span></a>
			<div class="yhot">
				热门：<a href="###">杂粮饭</a>
				<a href="###">辣椒酱</a>
				<a href="###">水果篮子</a>
				<a href="###">擦玻璃</a>
				<a href="###">蟹肉棒</a>
				<a href="###">苹果</a>
			</div>
		<!--导航部分-->
		<nav>
			<div class="alls">
				<span>全部分类</span>	
			
			<!--下拉出现的内容 利用定位来做,脱离文档流-->
			<ul class="ydetali">
				<li>
					<div class="yfruits">新鲜水果
					<ul class="item_list">
						<li><a href="#/list_one" >水果礼盒</a></li>
						<li><a href="###">进口水果</a></li>
						<li><a href="###">有机水果</a></li>
						<li><a href="###">国产水果</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="yseafood">生猛海鲜
					<ul class="item_list">
						<li><a href="###">海鲜礼盒</a></li>
						<li><a href="###">国产海鲜</a></li>
						<li><a href="###">进口海鲜</a></li>
						<li><a href="###">干货其它</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="ymeat">肉类家禽
					<ul class="item_list">
						<li><a href="###">羊肉</a></li>
						<li><a href="###">牛肉</a></li>
						<li><a href="###">鸡鸭肉</a></li>
						<li><a href="###">鱼肉</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="yegg">蛋奶素食
					<ul class="item_list">
						<li><a href="###">方便素食</a></li>
						<li><a href="###">奶制品</a></li>
						<li><a href="###">面包甜点</a></li>
						<li><a href="###">单品</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="yveg">田园蔬菜
					<ul class="item_list">
						<li><a href="###">蔬菜礼篮</a></li>
						<li><a href="###">有机蔬菜</a></li>
						<li><a href="###">地产蔬菜</a></li>
						<li><a href="###">进口蔬菜</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="ywine">零食酒水
					<ul class="item_list">
						<li><a href="###">零食</a></li>
						<li><a href="###">特色果干</a></li>
						<li><a href="###">休闲冲饮</a></li>
						<li><a href="###">茶叶</a></li>
						<li><a href="###">白酒</a></li>
						<li><a href="###">啤酒</a></li>
						<li><a href="###">葡萄酒</a></li>
						<li><a href="###">其它酒品</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="yfood">粮油杂货
					<ul class="item_list">
					    <li><a href="###">米面</a></li>
						<li><a href="###">杂粮</a></li>
						<li><a href="###">调味</a></li>
						<li><a href="###">食材</a></li>
					</ul>
					</div>
				</li>
				
				<li>
					<div class="ygift">礼品卡券</div>
				</li>
				<li style="border: none;">
					<div class="yfurn">家具用品</div>
				</li>
			</ul>
			</div>
			<div class="y_nav">
				<a class="y_nav_color" href="#/first" >首页</a>
				<a href="#/two">同城</a>
				<a href="#/three">礼拜五</a>
				<a href="#/four">积分商城</a>
				<a href="###" style="border: none;">导航+</a>
			</div>
		</nav>
		</header><br />
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/distpicker.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/distpicker.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".y_nav a").click(function(){
			$(this).addClass("y_nav_color").siblings().removeClass("y_nav_color");
		})
	</script>
</html>
